import styled from 'styled-components'
import Controller from '../../component/Controller'
import IconBg from '../../asserts/icon_bg.webp'
import IconBackWhite from '../../asserts/back_light.svg'
import { isIOS } from '../../utils/check'
import Connect from './Connect'
import List from './List'
import Header from './Header'

const Container = styled(Controller)`
    
`

const Ton: React.FC = () => {
    return <Container
        imagebackground={{
            image: IconBg,
            style: isIOS() ? {} : { position: 'fixed' } // TODO: why absolute will case some gesture problem in andriod
        }}
        navigation={{
            showBack: true,
            backIcon: IconBackWhite,
            rightItem: <Connect />
        }}
        contentClassName='content'
    >
        <Header />
        <List />
    </Container>
}

export default Ton